<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq斑马线</title>
</head>
<style type="text/css">
ul li{
	
	list-style-type: none;
}
.hover{
	background-color: blue;
}
</style>
<body>
<a href="index.html">首页</a>
	<ul>
		<li>item1</li>
		<li class="red">item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	var lis=$('ul li')
	// 方法一
	 	lis.mouseover(function(){
	 		//改变单个值
		$(this).css('backgroundColor','orange')
		$(this).css({'color':'white','backgroundColor':'purple'})//同时改变多个值
		$(this).css('fontSize', function(index, value) {
				console.log(Math.ceil(parseInt(value)*1.5))
				return Math.ceil(parseInt(value)*1.5);
			})
		$(this).addClass('hover')
	})


		lis.mouseout(function(){
		$(this).css('backgroundColor','')
		$(this).css('color','black')
		$(this).css('fontSize', function(index, value) {
			
				return Math.floor(parseInt(value) /1.5)
			})
		$(this).removeClass('hover')
})

	//方法二
	// lis.hover(function(){
	// 	$(this).css('backgroundColor','orange')
	// },function(){
	// 		$(this).css('backgroundColor','')
	// 	})
	</script>
</body>
</html>